<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/reset.css">
  <title>江北区智慧排水系统</title>
</head>

<body>

  <div id="container" style="width: 100%; height: 550px;"></div>

  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.14&key=aafa6a46d2913e29ec93bd22b38ee0e9&plugin=AMap.DistrictSearch,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
  <script>
    var opts = {
      subdistrict: 0,
      extensions: 'all',
      level: 'district'
    };
    //利用行政区查询获取边界构建mask路径
    //也可以直接通过经纬度构建mask路径
    var district = new AMap.DistrictSearch(opts);
    district.search('江北区', function(status, result) {
      var bounds = result.districtList[1].boundaries;
      var mask = []
      for (var i = 0; i < bounds.length; i += 1) {
        mask.push([bounds[i]])
      }
      var polygons = []
      if (bounds) {
        for (var i = 0, l = bounds.length; i < l; i++) {
          //生成行政区划polygon
          var polygon = new AMap.Polygon({
            map: map,
            strokeWeight: 1,
            path: bounds[i],
            fillOpacity: 0.8,
            fillColor: '#2349B8',
            strokeColor: '#0091ea'
          })
          polygons.push(polygon)
        }
      }
      var map = new AMap.Map('container', {
        resizeEnable: true,
        mask: mask,
        center: [106.259281,28.83156],
        disableSocket: true,
        viewMode: '3D',
        showLabel: false,
        labelzIndex: 130,
        pitch: 40,
        zoom: 9,
        layers: [
          new AMap.TileLayer.Satellite()
        ]
      });
      var styleName = "amap://styles/blue";
      map.setMapStyle(styleName); // 设置地图主题色
      map.add(polygons); // 绘制行政区
      map.setFitView(polygons);//视口自适应
      // var maskerIn = new AMap.Marker({
      //   position: [106.259281,28.83156],
      //   map: map
      // })
      // var maskerOut = new AMap.Marker({ //区域外的不会显示
      //   position: [106.259281,28.83156],
      //   map: map
      // })
      //添加高度面
      var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
      map.add(object3Dlayer)
      var height = -6000;
      var color = '#111158'; //rgba
      var wall = new AMap.Object3D.Wall({
        path: bounds,
        height: height,
        color: color
      });
      wall.transparent = true
      object3Dlayer.add(wall)
      //添加描边
      for (var i = 0; i < bounds.length; i += 1) {
        new AMap.Polyline({
          path: bounds[i],
          fillOpacity: 1,
          fillColor: '#80d8ff',
          strokeColor: '#7698F5',
          strokeWeight: 4,
          map: map
        })
      }
    });
  </script>

</body>

</html>